import React, { useState } from 'react'
import { NavBar, Space, Toast } from 'antd-mobile'
import { LoopOutline, MoreOutline, PayCircleOutline } from 'antd-mobile-icons'
import { Tabs } from 'antd-mobile'
import { Input } from 'antd-mobile'
import { Checkbox } from 'antd-mobile'
import { Button } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

function Index() {
    const [value, setValue] = useState('')
    const xuan=useNavigate()
    return (
        <div>
            <NavBar>
                <div style={{ float: "right", right: "0" }}>
                    <PayCircleOutline /><MoreOutline />
                </div>
            </NavBar>

            <Tabs>
                <Tabs.Tab title='机票' key='fruits'>
                    机票
                </Tabs.Tab>
                <Tabs.Tab title='特价机票' key='vegetables'>
                    特价机票
                </Tabs.Tab>
                <Tabs.Tab title='火车票' key='animals'>
                    <Tabs>
                        <Tabs.Tab title='单程' key='car'>
                            <div style={{ display: "flex" }}>
                                <Input
                                    placeholder='请输入内容'
                                    value={value}
                                    onChange={val => {
                                        setValue(val)
                                    }}
                                />
                                <LoopOutline fontSize={45} />
                                <Input
                                    placeholder='请输入内容'
                                    value={value}
                                    onChange={val => {
                                        setValue(val)
                                    }}
                                />
                            </div>

                            <p style={{ fontSize: "16px" }}>11月25日  明天</p>


                            <p style={{ fontSize: "5px" }}>
                                <Checkbox style={{ float: "left" }}>学生票</Checkbox>
                            </p>

                            <Button block color='primary' size='large' onClick={()=>xuan('/list')}>
                                搜索火车票
                            </Button>
                        </Tabs.Tab>
                        <Tabs.Tab title='往返' key='cars'>
                            往返
                        </Tabs.Tab>
                    </Tabs>
                </Tabs.Tab>
                <Tabs.Tab title='汽车票' key='car'>
                    汽车票
                </Tabs.Tab>
                <Tabs.Tab title='接送/租车' key='cars'>
                    接送/租车
                </Tabs.Tab>
            </Tabs>
        </div>
    )
}

export default Index
